<template>
	<z-nav-bar title="学员详情" transparentTitle="auto" :isBlack="false"></z-nav-bar>
	<view class="user-box uni-pa-32">
		<view class="flex_fsc">
			<image v-if="data.avatar" :src="setting.oss_pub_domain + data.avatar" class="head-img uni-mr-32"></image>
			<view class="width-100">
				<view class="flex_sbc">
					<view class="flex_fsc">
						<view class="z-font-32 text-w uni-mr-12">{{ data.name }}</view>
						<image
							v-if="data.sex"
							:src="setting.oss_pub_domain + '/app-img/player/evaluation/female.png'"
							class="icon-size-32"
						></image>
						<image
							v-else
							:src="setting.oss_pub_domain + '/app-img/icon/sex.png'"
							class="icon-size-32"
						></image>
					</view>
					<view class="edit" @click="editPlayer">编辑</view>
				</view>
				<view class="flex_sbc uni-mt-16">
					<view class="uni-color-grey flex_sh">ID：{{ data.id }}</view>
					<view class="edit u-line-1" style="min-width: 108rpx;width: auto;">{{ data.stuGroup || '暂无分组' }}</view>
					<!-- <view class="flex_fsc" @click="playerSendMsg">
						<image :src="setting.oss_pub_domain + '/app-img/icon/msg.png'" class="icon-size-32 uni-mr-10"></image>
						<view>发送消息</view>
					</view> -->
				</view>
			</view>
		</view>
		<view :class="[data.studentId ? 'flex_sac' : 'flex_sbc']">
			<view  class="group-item flex_cc" @click="data.studentId ? playerSendMsg() : wxShare()">
				<view class="text-c">
					<image :src="setting.oss_pub_domain + '/app-img/icon/wexin-grey.png'" class="icon-size"></image>
					<view class="z-font-24" style="color: #9eabc6">
						{{ !data.phone || data.phone == '未绑定' ? '暂不可用' : data.studentId ? '发送消息' : '邀请绑定' }}
					</view>
				</view>
			</view>
			<view class="group-item flex_cc">
				<view class="text-c">
					<image :src="setting.oss_pub_domain + '/app-img/icon/phone.png'" class="icon-size"></image>
					<view class="z-font-24" style="color: #9eabc6">{{ data.phone }}</view>
				</view>
			</view>
		</view>
	</view>
	<view class="user-box uni-mt-20 uni-pa-32">
		<view class="flex_sbc">
			<view class="flex_fse">
				<view class="text-c">
					<view class="z-font-24 uni-color-grey">当前成绩</view>
					<view class="uni-color-main z-font-32 text-w uni-mt-6">
						{{ $gc.score[data.score] && $gc.score[data.score].label }}
					</view>
				</view>
			</view>
			<view class="line flex_cc">
				<image :src="setting.oss_pub_domain + '/app-img/player/jkjk.png'"></image>
			</view>
			<view class="flex_fse">
				<view class="text-c">
					<view class="z-font-24 uni-color-grey">目标成绩</view>
					<view class="uni-color-main z-font-32 text-w uni-mt-6">
						{{ $gc.score[data.targetScore] && $gc.score[data.targetScore].label }}
					</view>
				</view>
			</view>
		</view>
		<navigator :url="'/pages/player/target/target?id=' + data.id" hover-class="none" class="button">
			教学目标设定
		</navigator>
	</view>
	<view class="user-box uni-pa-32 uni-mt-20">
		<view class="flex_sbc uni-mb-32">
			<view class="text-w">课包管理</view>
			<view class="edit" style="width: 120rpx" @click="packageEditRef.open({}, -1)">新建课包</view>
		</view>
		<view v-if="coursePackage.length">
			<view v-for="(course, index) in coursePackage" :key="course.id" class="course-package">
				<view class="package-edit" @click="packageEditRef.open(course, index)">编辑</view>
				<view class="flex_fs">
					<image
						:src="`${setting.oss_pub_domain}/app-img/icon/icon-course-${course.type == 2 ? 'time' : 'main'}.png`"
						class="icon-size uni-mr-16"
					></image>
					<view>
						<view class="text-w u-line-1" style="width: 420rpx">{{ course.names }}</view>
						<view class="z-font-24 uni-color-grey uni-mt-4 flex_fsc">
							<view>课包类型: {{ course.type == 1 ? '课时包' : course.type == 2 ? '限时包' : '' }}</view>
							<view v-if="course.type === 2">
								<span class="uni-mx-20">|</span>
								有效期: {{ course.validityDate }}
							</view>
						</view>
						<view v-if="course.type == 2" class="uni-mt-12">已上课时：{{ course.residueNumber || 0 }}</view>
					</view>
				</view>
				<view v-if="course.type == 1" class="package flex_sac">
					<view class="text-c">
						<view class="z-font-36 text-w" style="line-height: 50rpx">{{ course.number || 0 }}</view>
						<view class="tips">总课时</view>
					</view>
					<view class="text-c">
						<view class="z-font-36 text-w" style="line-height: 50rpx">{{ course.residueNumber || 0 }}</view>
						<view class="tips">已上课时</view>
					</view>
					<view class="text-c">
						<view class="z-font-36 text-w" style="line-height: 50rpx">{{ (course.number || 0) - (course.residueNumber || 0) }}</view>
						<view class="tips" style="color: #008965">剩余课时</view>
					</view>
				</view>
			</view>
		</view>
		<z-no-data v-else placeholder="暂无课包" width="100"></z-no-data>
		<navigator url="/pages/player/course/package-list" v-if="coursePackage.length" class="uni-mt-16" hover-class="none">
			<view class="flex_cc">
				<view style="color: #81a290">更多</view>
				<image :src="setting.oss_pub_domain + '/app-img/icon/ext.png'" class="icon-size-32"></image>
			</view>
		</navigator>
	</view>
	<view class="user-box uni-mt-20 uni-px-40 uni-py-44 flex_sbc">
		<navigator url="/pages/player/course/plan?tab=0" class="text-c" hover-class="none">
			<view>全部课程</view>
			<image :src="setting.oss_pub_domain + '/pics/allclass.png'" class="list-icon-size"></image>
			<view class="uni-mt-8" style="color: #606266">{{ statisticalInformation.totalCourseNum }}个</view>
		</navigator>
		<navigator url="/pages/question/index" class="text-c" hover-class="none">
			<view>球员问题</view>
			<image :src="setting.oss_pub_domain + '/pics/question.png'" class="list-icon-size"></image>
			<view class="uni-mt-8" style="color: #606266">{{ statisticalInformation.totalQuestionNum }}个</view>
		</navigator>
		<navigator
			:url="`/pages/player/evaluation/student-cpdetail/student-cpdetail?id=${data.id}`"
			class="text-c"
			hover-class="none"
		>
			<view>学员评测</view>
			<image :src="setting.oss_pub_domain + '/pics/evalico.png'" class="list-icon-size"></image>
			<view class="uni-mt-8" style="color: #606266">{{ statisticalInformation.evalNum }}个</view>
		</navigator>
		<navigator url="/pages/ask-questions/index" class="text-c" hover-class="none">
			<view>提问解答</view>
			<image :src="setting.oss_pub_domain + '/app-img/player/ask.png'" class="list-icon-size"></image>
			<view class="uni-mt-8" style="color: #606266">{{ statisticalInformation.totalAnswerNum }}个</view>
		</navigator>
	</view>
	<view class="flex_sbc uni-mx-32">
		<navigator url="/pages/player/analysis/analysis" hover-class="none">
			<view class="analyze-archives-common analyze flex_cc">
				<view class="uni-mr-36">学员分析</view>
				<image :src="setting.oss_pub_domain + '/app-img/player/analyze.png'" class="list-icon-size"></image>
			</view>
		</navigator>
		<navigator url="/pages/player/record/record" hover-class="none">
			<div class="analyze-archives-common archives flex_cc">
				<view class="uni-mr-36">学员档案</view>
				<image :src="setting.oss_pub_domain + '/app-img/player/archives.png'" class="list-icon-size"></image>
			</div>
		</navigator>
	</view>
	<view class="user-box training-box">
		<view class="flex_sbc uni-mt-16">
			<view class="text">课程</view>
			<navigator url="/pages/player/course/plan?tab=0" class="more" hover-class="none">更多</navigator>
		</view>
		<view v-if="trainingList.length">
			<view v-for="item in trainingList" :key="item.id" class="course-box">
				<view class="flex_sbc">
					<view class="text-w u-line-1">{{ item.name }}</view>
					<view class="z-font-24 flex_sh uni-ml-16 flex_sh" style="color: #585c66">
						<text class="uni-mr-20">第{{ item.serialNumber }}阶段</text>
					</view>
				</view>
				<view class="flex_fsc uni-mt-16">
					<image :src="setting.oss_pub_domain + '/app-img/player/timer.png'" class="icon-size-32"></image>
					<view class="time-solved">{{ item.beginTime }}</view>
				</view>
				<view
					v-for="(question, qindex) in item.relQuestionSchemeList"
					class="problem flex_fs"
					@click="startTraining(item)"
				>
					<view class="width-100">
						<view v-if="item.result" class="flex_sbc">
							<view class="text-w u-line-1">{{ question.name }}</view>
							<view
								v-if="item.result[question.id] && item.result[question.id].trainingState"
								class="z-font-24 uni-color-grey flex_sh"
							>
								已解决
							</view>
							<view v-else class="time-solved flex_sh">待解决</view>
						</view>
						<view class="uni-color-grey uni-mt-4 z-font-24 u-line-1">
							{{ question.descriptionTagName }}
						</view>
					</view>
				</view>
				<view class="buttons" @click="startTraining(item)">开始授课</view>
			</view>
		</view>
		<view v-else class="text-c z-font-24 uni-color-grey uni-py-16">暂无训练课程</view>
	</view>
	<botton-fixed ref="bottonFixedRef" :playerId="data.id"></botton-fixed>
	<package-edit ref="packageEditRef" @done="getCoursePackageList"></package-edit>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { getPlayerDetial, getCourseList, getStuCourse, studentHomeStatistics, getPackageList } from '@/api/player.js';
import { getUser } from '@/api/student.js';
import { getConversationld } from '@/api/message.js';
import { getPlayerQuestionList } from '@/api/question';
import BottonFixed from './botton-fixed';
import PackageEdit from '../course/package';
const { proxy: that } = getCurrentInstance();

const data = reactive({}),
	trainingList = ref([]),
	statisticalInformation = reactive({}),
	coursePackage = ref([]);
let newStudent = 0;
onLoad((opt) => {
	data.id = parseInt(opt.id);
	newStudent = parseInt(opt.new || 0);
});
const bottonFixedRef = ref();
onShow(() => {
	fetchData();
	fetchPlanData();
	if (bottonFixedRef.value) bottonFixedRef.value.close();
});

function fetchData() {
	getPlayerDetial(data.id).then((res) => {
		if (res.expireTime) res.expireTime = res.expireTime.split(' ')[0];
		Object.assign(data, res);
		if (newStudent && data.phone && data.phone != '未绑定') {
			that.tools.alert('请分享学员邀请绑定');
			setTimeout(() => {
				newStudent = 0;
				uni.navigateTo({
					url: '/pages/player/share/share'
				});
			}, 1500);
		}
		uni.setStorageSync('player-info', data);
	});
	getStuCourse({ userId: data.id }).then((res) => {
		res.forEach((item) => {
			if (item.result) item.result = JSON.parse(item.result);
		});
		trainingList.value = res;
	});
	studentHomeStatistics(data.id).then((res) => {
		Object.assign(statisticalInformation, res);
	});
	getCoursePackageList()
}


//  学员编辑
function editPlayer() {
	uni.setStorageSync('player-profile', data);
	uni.navigateTo({
		url: '/pages/player/add/add'
	});
}

// 课程计划
const planInfo = ref({});
function fetchPlanData() {
	getCourseList({
		pageNum: 1,
		pageSize: 1,
		userId: data.id,
		type: 1
	}).then((res) => {
		planInfo.value = res.rows[0] ? res.rows[0] : {};
	});
}

// 开始训练
function startTraining(item) {
	uni.setStorageSync('edit-course', item);
	uni.navigateTo({
		url: '/pages/course/details/details'
	});
}
// 去发消息
async function playerSendMsg() {
	if (!data.studentId) {
		uni.showToast({
			title: '暂未绑定学员',
			icon: 'error'
		});
		return;
	}
	const user = await getUser();
	const res = await getConversationld({
		fromId: user.userId,
		toId: data.studentId
	});
	uni.navigateTo({
		url: '/uni_modules/uni-im/pages/chat/chat?conversation_id=' + res,
		animationDuration: 300
	});
}

function wxShare() {
	if (!data.phone || data.phone == '未绑定') return that.tools.alert('请先填写学员手机号');
	uni.navigateTo({
		url: '/pages/player/share/share'
	});
}

// 课程包管理
const packageEditRef = ref('')
/**
 * 获取课程包列表
 */
function getCoursePackageList() {
	getPackageList({pageNum: 1, pageSize: 5, stuId: data.id }).then(res => {
		res.rows.forEach(item => {
			if (item.type === 2) item.validityDate = item.validityDate.split('T')[0]
		})
		coursePackage.value = res.rows
		console.log(coursePackage.value);
	})
}
</script>

<style lang="scss">
@import 'details.scss';
::v-deep.uni-fab--rightBottom {
	right: 40vw !important;
}

::v-deep.uni-fab__circle--rightBottom {
	right: 40vw !important;
}
</style>
